<!DOCTYPE html>
<html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>父子间组件通信：子传父</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
    <!--子组件，绑定点击事件-->
 <cpn @itemclick="cpnClick"></cpn>
</div>

<!--子组件模板-->
<template id="tmp">
    <div>
        <button v-for="book in books"  @click="btnClick(book)">
            {{book.name}}
        </button>
    </div>
</template>


<script>

    /*声明子组件*/
    const cpn={
        template:"#tmp",
        /*子组件数据*/
        data(){
            return{
                books:[
                    {id:1,name:"计算机组成原理"},
                    {id:2,name:"操作系统"},
                ]
            }
        },
        methods:{
            /*子组件点击触发方法,传入点击对象*/
            btnClick(book){
                /*点击触发父组件自定义事件，传入对象*/
                this.$emit("itemclick",book);
            }
        }
    };

    const vm = new Vue({
        el: "#app",
        data:{},
        components:{
          cpn
        },
        methods:{
            /*触发点击事件调用方法，传入点击对象*/
            cpnClick(item){
                console.log("cpnClick",item);
            }
        }
    })

</script>
</body>
</html>